<template>
    <view class="container">
        <!--view class="image-border">
            <image
                src="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/product_03.png"
            ></image>
        </view>
        <view class="product-name">
            <u--text
                text="UFC｜MIGU联名款白热卖"
                :lines="1"
                size="28rpx"
                color="#000000"
            ></u--text>
        </view>
        <view class="nft-tag"></view>
        <view class="product-spec">
            数量 x 1 灰色 L
        </view-->
        <view class="mt-120">
            <order-product :product="orderInfo.product"></order-product>
        </view>
        <view class="product-price">
            <text>实付</text>
            <text>¥</text>
            <text>{{type === 'grab'? orderInfo.payMoney:orderInfo.payPrice}}</text>
        </view>
        <view class="order-info">
            <text v-if="orderInfo.receiverId">收货信息：{{orderInfo.receiverName}} {{orderInfo.receiverMobile}} {{orderInfo.receiverAddress}}</text>
            <text>订单编号：{{orderInfo.num}}</text>
            <text>订单时间：{{orderInfo.createAt}}</text>
            <text v-if="orderInfo.expressType">快递公司：{{orderInfo.expressType}}</text>
            <text v-if="orderInfo.expressNum">快递单号：{{orderInfo.expressNum}}</text>
            <text>订单状态：{{type === 'grab'? grabOrderStateText(orderInfo.state):orderStateText(orderInfo.state)}}</text>
        </view>
        <view class="bottom">
            <!--u-button
                text="立即支付"
                class="custom-style"
                :customStyle="{
                    background: '#000000',
                    color: '#ffffff'
                }"
                :throttleTime="1500"
                @click="payOrder()"
                v-if="orderInfo.state === 'wait_pay'"
            ></u-button-->
            <u-button
                text="确认收货"
                class="custom-style"
                :customStyle="{
                    background: '#000000',
                    color: '#ffffff'
                }"
                :throttleTime="1500"
                 v-if="orderInfo.state === 'receipt'"
                @click="complete()"
            ></u-button>
        </view>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
import OrderProduct from "@/components/OrderProduct"
import { getOrderInfo, getWechatPay, orderComplete } from "@/config/api"
export default {
    components: {
        OrderProduct
    },
    data() {
        return {
            orderInfo: {},
            type: 'order'
        }
    },
    onLoad(option) {
        console.log(78,option);
        this.type = option.type
        this.getData(option)
    },
    methods: {
        async getData(option) {
            const res = await getOrderInfo(option)
            this.orderInfo = res
            if (option.type === 'grab') {
                this.orderInfo.product.number = 1
            }
        },
        orderStateText(state) {
            if (state == 'wait_pay') {
                return "待支付"
            } else if(state == 'ship') {
                return '待发货'
            } else if (state =='receipt') {
                return '已发货'
            } else if (state =='complete') {
                return '已完成'
            } else if (state =='close') {
                return '已关闭'
            }
        },
        grabOrderStateText(state) {
            if (state == 'wait') {
                return "待开奖"
            } else if(state == 'win') {
                return '待付款'
            } else if (state =='lost') {
                return '已完成'
            } else if (state =='complete') {
                return '已完成'
            } else if (state =='close') {
                return '已关闭'
            }
        },
        async complete() {
            const res = await orderComplete(this.orderInfo.id)
            this.orderInfo.state = res.state
        },
        async payOrder() {
            uni.showLoading({
                title: '正在发起支付'
            })
            const payment = await getWechatPay({
                orderId: this.orderInfo.id,
                productName: this.orderInfo.product.name,
                openId: this.$store.getters.mpOpenId
            })
            uni.hideLoading()
            const than= this
            // #ifdef H5
            WeixinJSBridge.invoke('getBrandWCPayRequest', payment,  (res) => {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    than.orderInfo.state = than.orderInfo.type == "nft"? "complete":"ship"
                }
            })
            // #endif
            // #ifdef MP-WEIXIN
            uni.requestPayment({
                provider: 'wxpay',
                ...payment,
                success: function (res) {
                    than.orderInfo.state = than.orderInfo.type == "nft"? "complete":"ship"
                },
                fail: function (err) {
                    console.log(err)
                }
            })
            // #endif
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        box-sizing: border-box;
        padding-top: 10rpx;
        .mt-120 {
            margin-top: 80rpx;
        }
        .product-price {
            text-align: center;
            margin-top: 30rpx;
            text {
                font-family: PingFangSC-Regular, PingFang SC;
                color: #000000;
                &:nth-child(1) {
                    font-size: 24rpx;
                    font-weight: 400;
                    margin-right: 19rpx;
                }
                &:nth-child(2) {
                    font-size: 22rpx;
                    font-weight: bold;
                    font-weight: 400;
                }
                &:nth-child(3) {
                    font-size: 30rpx;
                    font-weight: bold;
                }
            }
        }
        .order-info {
            background: #ffffff;
            border-radius: 3rpx;
            border: 24rpx solid #EEEEEE;
            padding: 40rpx 20rpx 10rpx 20rpx;
            margin-top: 50rpx;
            text {
                display: block;
                margin-bottom: 30rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #4A4A4A;
            }
        }
        .bottom {
            position: fixed;
            box-sizing: border-box;
            width: 100%;
            padding: 0 20rpx;
            bottom: 33rpx;
            left: 0;
        }
    }
</style>
